import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Alert,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import TImage from '../../components/TImage';
import BasePage from '../common/BasePage';
import CommonAvatarView from '../common/CommonAvatarView';
import ToastUtils from '../../common/ToastUtils';
import QuanziRequestQuitQunAciton from '../../actions/quanzi/QuanziRequestQuitQunAciton';
import QuanziRequestQunDataAction from "../../actions/quanzi/QuanziRequestQunDataAction";
import QuanziRequestQunMemberListAtion from "../../actions/quanzi/QuanziRequestQunMemberListAtion";
import QuanziRequestEnterQunAciton from "../../actions/quanzi/QuanziRequestEnterQunAciton";

const SHOW_OTHER_MEMBER_NUM = 10;
//群资料
export default class QuanziQunDataPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.qunData = this.props.pageData.routeData;
    this.state.memberList = [];

    this.state.qunData.members = [];
    for (var i = 0; i < 30; i++) {
      this.state.qunData.members.push("名字" + i);
    }
    this.comment="申请加入群聊";
  }

  componentWillUpdate(nextProps, nextState) {
    super.componentWillUpdate(nextProps, nextState);
    if(nextState.enterSuccess) {
      // this._listView.doRefresh();
      ToastUtils.show("加入群聊成功");
      nextState.enterSuccess = false;
      nextState.comment = "申请加入群聊";
      this.state.qunData.is_member = 1;
      this.popRoute(1);
      this._enterChat();
    }

    if(nextState.quitSuccess){
      ToastUtils.show("退出该群成功");
      nextState.quitSuccess = false;
      this.state.qunData.is_member = 0;
      this.goBackIndex(1);
    }

    if(nextState.memberListUpdate) {
      nextState.memberListUpdate = false;
      // for (var i = 0; i < 10; i++) {
      //   nextState.memberList.push(nextState.memberList[0]);
      // }
    }
  }


  _dealEnterPage() {
    if(this.state.qunData != this.props.pageData.routeData){
      if(!this.state.qunData ||
        this.state.qunData.chatgroup_id != this.props.pageData.routeData.chatgroup_id){
        this.state.qunData = this.props.pageData.routeData;
        this._requestData();
      }

    }
  }

  componentDidMount() {
    this._requestData();
  }


  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height, backgroundColor:"#ffffff"}}>
        <ScrollView style={{flex:1, paddingTop:SizeUtils.translateDesignHeightToCode(260),}}>
          <View style={{width:SizeUtils.getWindowSize().width,
              flexDirection:"column", alignItems:"center"}}>
            {this._renderShowImage()}
            {this._renderNameAndDescription()}
            {this._renderMembers()}
            {this._renderQuitButton()}
          </View>
        </ScrollView>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderShowImage() {
    return (
      <View style={{width:SizeUtils.translateDesignWidthToCode(200),
          height:SizeUtils.translateDesignWidthToCode(200),
          borderWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#cccccc"}}>
        <TImage source={this._getShowImage()} style={{width:200, height:200}}/>
      </View>
    )
  }

  _getShowImage() {
    if(this.state.qunData.image_urls != undefined && this.state.qunData.image_urls[0].length > 0) {
      return {uri:this.state.qunData.image_urls[0]};
    }
    return {uri:""}
  }

  _renderMembers() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          paddingLeft:SizeUtils.translateDesignWidthToCode(140)}}>
        {this._renderLeader()}
        {this._renderOtherMembers()}
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40), flexDirection:"row",
            alignItems:"center"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333"}}>
              简介
          </Text>
          <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(28),
              paddingLeft:SizeUtils.translateDesignWidthToCode(50)}}>
            {this.state.qunData.leader_desc === undefined || this.state.qunData.leader_desc == "" ?
                "这家伙很懒，什么都没留下" : this.state.qunData.leader_desc}
          </Text>
        </View>
      </View>
    )
  }

  _renderNameAndDescription() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40),
          }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(34), color:"#333333",
            textAlign:"center"}}>
          {this.state.qunData.title}
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#999999",
            textAlign:"center", paddingTop:SizeUtils.translateDesignHeightToCode(22)}}>
          {this.state.qunData.desc}
        </Text>
      </View>
    )
  }

  _renderOtherMembers() {
    return (
      <View style={{flexDirection:"row", paddingTop:SizeUtils.translateDesignHeightToCode(40)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
          成员
        </Text>
        <View style={{flexDirection:"row", flexWrap:"wrap", alignItems:"center",
            paddingRight:SizeUtils.translateDesignWidthToCode(160),
            paddingLeft:SizeUtils.translateDesignWidthToCode(50)}}>
          {this.state.memberList && this.state.memberList.map(
            (memberData, index) => {
              if(index < SHOW_OTHER_MEMBER_NUM) {
                return this._renderOtherMemberShowImage(memberData, index);
              }
            }
          )}
        </View>
      </View>
    )
  }

  _renderOtherMemberShowImage(memberData, index) {
    let child = null;
    let borderWidth = 0;
    if(index == SHOW_OTHER_MEMBER_NUM - 1 && this.state.memberList.length > SHOW_OTHER_MEMBER_NUM) {
      //省略号
      child = (<Text style={{color:"#cccccc", fontSize:SizeUtils.translateFontSizeToCode(40),}}>
          ...
      </Text>);
    }
    else {
      borderWidth = SizeUtils.translateDesignNumToCode(3);
      child = (
        <CommonAvatarView avatarUri={memberData.avatar} size={45} />
      )
    }
    return (
      <View key={index} style={{width:SizeUtils.translateDesignWidthToCode(50),
          height:SizeUtils.translateDesignWidthToCode(50), borderRadius:SizeUtils.translateDesignWidthToCode(25),
          borderColor:"#eeeeee", borderWidth:borderWidth, flexDirection:"row",
            marginBottom:SizeUtils.translateDesignHeightToCode(22),
            justifyContent:"center", alignItems:"center"}}>
        {child}
      </View>
    )
  }

  _renderLeader() {
    return (
      <View style={{flexDirection:"row", alignItems:"center",
          paddingTop:SizeUtils.translateDesignHeightToCode(78)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333"}}>
          群主
        </Text>
  
        <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(40)}}>
          <CommonAvatarView avatarUri={this.state.qunData.admin_avatar} size={90} />
        </View>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#999999",
            paddingLeft:SizeUtils.translateDesignWidthToCode(22)}}>
          {this.state.qunData.admin_name}
        </Text>
      </View>
    )
  }

  _renderQuitButton() {
    // if(this.state.qunData.is_member){
        return (
          <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(370), height:SizeUtils.translateDesignHeightToCode(74),
              backgroundColor:"#db3132", borderRadius:SizeUtils.translateDesignNumToCode(12),
              flexDirection:"row", justifyContent:"center", alignItems:"center",
              marginTop:SizeUtils.translateDesignHeightToCode(100)}} disabled={this.state.qunData.state==0} onPress={this._onPressQuitButton.bind(this)}>
            <Text style={{color:"#ffffff", fontSize:SizeUtils.translateFontSizeToCode(24)}}>
              {this._getButtonText()}
            </Text>
          </TouchableOpacity>
        )
    // }
  }

  _getButtonText(){
    if(this.state.qunData.state == 0){
      return "审核中";
    }

    if(this.state.qunData.is_member == 1){
      return "退出该群";
    }
    else if(this.state.qunData.is_member == 2){
      return "审核中";
    }
    else{
      return "加入该群";
    }

  }

  _onPressQuitButton() {
    if(this.state.qunData.state == 0){
      return;
    }

    if(this.state.qunData.is_member == 1){
      Alert.alert('提示', "确认是否退出该群", [
       {text:'确定',onPress:()=>{this._quitQun()}},
       {text:'取消',onPress:()=>{}}
       ])
    }else{
       Alert.alert('提示', "确认是否加入该群", [
        {text:'确定',onPress:()=>{this._enterQun()}},
        {text:'取消',onPress:()=>{}}
      ])
    }
  }

  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{height:SizeUtils.translateDesignHeightToCode(51), flexDirection:"row",
          alignItems:"center"}}>
        <Text>. . .</Text>

      </View>
    )
  }
 _onPressNavigationBarRightBtn() {
    this.gotoPage(Config.pages.qz_qunliao_members,this.state.qunData);
  }


  _enterChat() {
    this.gotoPage(Config.pages.qz_qunliao_chat,this.state.qunData)
  }

  _enterQun() {
    new QuanziRequestEnterQunAciton().call(this, {content:this.comment,board_id:this.state.qunData.board_id,chatgroup_id:this.state.qunData.chatgroup_id});
  }

  _quitQun() {
    new QuanziRequestQuitQunAciton().call(this, {board_id:this.state.qunData.board_id,chatgroup_id:this.state.qunData.chatgroup_id});
  }

  _requestData() {
    new QuanziRequestQunDataAction().call(this, {board_id:this.state.qunData.board_id,chatgroup_id:this.state.qunData.chatgroup_id});
    this._requestQunMemberList();
  }

  _requestQunMemberList() {
    new QuanziRequestQunMemberListAtion().call(this, {board_id:this.state.qunData.board_id,chatgroup_id:this.state.qunData.chatgroup_id, page:1,onlyFirstPage:true});
  }
}
